<template>
  <div class="statistical">
    <div class="title">历史得分趋势</div>
    <div id="echartsDemo" style="clear:both"></div>
    <div class="title">历史训练记录（共5次）</div>
    <div style="padding: 20px 20px 0 20px;">
      <InsTable :table-head="tableHead" :table-data="tableData" tableHeight="450">
    </InsTable>
    </div>
  </div>
</template>

<script>
import InsTable from '@/components/InsTable'
let echarts = require('echarts')

export default {
  name: 'tj-circle',
  components: {
    InsTable
  },
  props: {
    // circelData: {
    //   type: Array,
    //   required: true
    // }
  },
  data () {
    return {
      tableHead: [
        {
          label: '任务名称', prop: 'resource_training_name', isSlot: true
        }, {
          label: '题量', prop: 'subject_num'
        }, {
          label: '完成状态', prop: 'finished_flag', isSlot: true // 1-进行中；2-完成；0或者空则为未开始"
        }, {
          label: '操作', prop: 'opera', isSlot: true
        }
      ],
      tableData: [],
      // 图表数据
      option: {
        // legend: {
        //   data: ["今日课程学习时长", "班级课程平均学习时长"],
        //   right: 0,
        //   orient: "vertical"
        // },
        xAxis: {
          type: 'category',
          data: [
            '2017-12-14',
            '2017-12-15',
            '2017-12-16',
            '2017-12-17',
            '2017-12-18',
            '2017-12-19',
            '2017-12-20'
          ]
        },
        yAxis: {
          type: 'value',
          // 设置Y轴最大值
          max: 120
        },
        series: [
          {
            name: '今日课程学习时长',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#009CF6',
                lineStyle: {
                  color: '#009CF6'
                }
              }
            },
            data: [90, 91, 23, 14, 56, 78, 38],
            label: {
              show: true
            }
          }
        ]
      }
    }
  },
  mounted () {
    let myChart = echarts.init(document.getElementById('echartsDemo'))
    myChart.setOption(this.option)

    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
}
</script>

<style lang="scss" scoped>
// echarts图表大小
#echartsDemo {
  width: 100%;
  height: 300px;
  border-bottom: 1px dashed #E5E5E5;
}
.statistical {
  .title {
    font-size:22px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(16,29,55,1);
    padding: 20px 20px 0 20px;
  }
}
</style>
